<template>
	<!-- 此处改动， 文件为新添加组件 -->
	<view class="container" v-if="TanKuangHide">
		<!-- 弹框 -->
		<view class="tankaung" v-if="TanKuangHide">
			<view class="title">
				<image src="../../static/userifo-supplement/guanbi.png" mode="" @click="close"></image>
				<view class="text">信息补充</view>
			</view>

			<!-- 头像 -->
			<view class="cont" v-show="TouXiangHide">
				<view class="TXtest">头像认证</view>
				<view class="head-portrait" @click="touxiangClick">
					<image :src="imgBase" mode=""></image>
				</view>
			</view>

			<!-- 性别选择 -->
			<view class="xingbie" v-show="userSexHide">
				<view class="XBText">性别选择</view>
				<view class="Gender">
					<view class="nan gender" @click="genderClick(0)" :class="or_gender==0 ? 'nan-bg':''">
						<view class="gender-ctn">
							<text>男</text>
							<image
								:src="or_gender==0 ? '../../static/userifo-supplement/nan.png':'../../static/userifo-supplement/nan2x.png'"
								mode="aspectFill" class="image"></image>
						</view>
					</view>
					<view class="nv gender" @click="genderClick(1)" :class="or_gender==1 ? 'nv-bg':''">
						<view class="gender-ctn">
							<text>女</text>
							<image
								:src="or_gender==1 ? '../../static/userifo-supplement/nv.png':'../../static/userifo-supplement/nv2x.png'"
								mode="aspectFill" class="image"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 实名认证 -->
			<view class="Real-name" v-show="idCardNum" @click="RealName">
				<view class="tex1-name">实名认证</view>
				<view class="renzheng">
					<text>{{Real_name}}</text>
					<image src="../../static/icon1/finishInvite-jt.png" mode=""></image>
				</view>
			</view>

			<view class="" style="padding: 0 0  40rpx 0;" @click="OpenLLG">
				<view class="zlg-btn " :class=" bgcolor ? 'zlg-btn-bg':'' ">确定</view>
			</view>
			<!-- 此处是每次回到页面都会更新，保证头像更新 -->
			<view style="height: 0;width: 0;">
				{{idphotoPath}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		putb64
	} from '@/libs/unit.js'
	export default {
		props:["idphotoPath"],
		data() {
			return {
				order_listNumber :0,//订单数量
				user: {
					userSex: ''
				},
				TanKuangHide: false, //控制弹框隐藏
				or_gender: '3', //0男
				bgcolor: false,
				userSexHide: false, //判断用户性别是否选择			进行隐藏
				imgBase: "", //用户认证的头像
				TouXiangHide: false, //用户是否认证头像			进行隐藏
				Real_name: "去认证", //用户是否实名认证
				idCardNum: false, //根据身份证信息判断是否实名			进行隐藏
				isTel: false, //用户是否填写备用电话 			进行隐藏
				TelModel: "", //备用手机号
				idCardStatus: "",
				avatar: "", //七牛token
				uploadToken: "",
				phonenumber: "", //注册的电话
				userType: '', //用户类型，0雇员，1雇主
			}
		},
		methods: {
			// 获取用户信息
			async getuserIfor() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				console.log(res, "获取用户信息111")
				if(res.data.payPwdFlag){
					uni.setStorageSync('isHavePayPassword',true)
				}
				else{
					uni.setStorageSync('isHavePayPassword',false)
				}
				if (res.code===531) {
					uni.navigateTo({
						url: '/pages/riskControl/riskControl',
					})
					return
				}
				this.userType = res.data.userType // 获取用户类型 0雇员，1雇主
				this.phonenumber = res.data.user.phonenumber //用户注册的电话
				this.user.userSex = res.data.user.sex //用户性别
				// 判断是否实名 0: 待提交， 1：审核中， 2：审核通过， 3：审核驳回
				console.log(this.order_listNumber,"订单数量");
				if (res.data.idCardStatus == 0 || res.data.idCardStatus == 3) {
					this.idCardNum = true
					this.idCardStatus = res.data.idCardStatus
					this.TanKuangHide = true
				}
				//是否填写备用电话 雇员没有备用电话
				// if (res.data.userType == 1 ) {
				// 	if (res.data.standbytelephone == null) {
				// 		this.isTel = true
				// 		this.TanKuangHide = true
				// 	}
				// }
				
				// console.log(this.userType,"备用电话ya~~~~~~~~~~~");
				// 是否认证头像 idavaterStatus 0默认 1 拒绝 2 同意
				if (res.data.user.avatarto == null || res.data.user.idavaterStatus == 1 ) {
					this.TouXiangHide = true
					this.TanKuangHide = true
				}
				// 性别
				if (this.user.userSex != 0 && this.user.userSex != 1) {
					this.userSexHide = true
					this.TanKuangHide = true
					console.log(this.user.userSex, "性别", this.userSexHide);
				}	
					
			},
			// 获取手机
			// phone(tel) {
			// 	let res = this.$fetch(this.$api.updStandbytelephone, {
			// 		telephone: tel
			// 	}, "POST")
			// },

			// 顺序依次执行
			async a() {
				await this.uploadImgs(this.imgBase)
				// await this.upd_user()
			},
			// 选择性别
			genderClick(i) {
				if (i == 0) {
					this.or_gender = 0
				} else {
					this.or_gender = 1
				}
			},

			OpenLLG() {
					// console.log(this.idphotoPath,"=================");
				if (this.TouXiangHide == true ? this.imgBase == '' : false) return uni.showToast({title: '请输上传头像',icon: 'none'})	
				if (this.userSexHide == true ? this.or_gender == 3 : false) return uni.showToast({title: '请选择性别',icon: 'none'})
				if (this.idCardNum == true ? true : false) return uni.showToast({title: '请实名认证',icon: 'none'})

				
					this.uploadImgs(this.imgBase)
					// 新增修改 183
					uni.setStorageSync("pics", this.imgBase)
				
				this.upd_user()
				// 提交之后关闭弹框
				this.TanKuangHide = false


			},
			// 修改个人信息
			upd_user() {
				// this.phone(this.TelModel)
				let res = this.$fetch(this.$api.upd_user, {
					sex: this.userSexHide == true ? this.or_gender : "", //性别
					avatar: this.avatar, //头像
				}, 'POST')
			},
			// 点击头像拍照
			touxiangClick() {
				uni.navigateTo({
					url: "/pages/camera/idphoto/idphoto"
				})
			},
			//获取七牛上传TOKEN
			async getUploadToken() {
				let res5 = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				uni.setStorageSync('uploadToken', res5.msg)
				this.uploadToken = uni.getStorageSync('uploadToken')
			},
			// 上传图片至七牛
			async uploadImgs(base64) {
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: base64,
					formData: {
						token: this.uploadToken
					},
					success: ({
						data
					}) => {
						data = JSON.parse(data)
						this.avatar = data.hash
						this.upd_user()
					}
				})
			},
			async order_list() {
				let res = await this.$fetch(this.$api.order_list,{pageSize:10},'POST')
				this.order_listNumber = res.rows.length
				console.log(res,"订单列表==============================",res.rows.length)
				
			},
			// 实名认证入口
			RealName() {
				uni.navigateTo({
					url: "../../pages/real-name/real-name"
				})
				console.log("111");
			},
			// 关闭弹窗
			close() {
				this.TanKuangHide = false
			},
		},
		beforeMount() {
			this.getUploadToken()
				
		},
		updated() {
			this.imgBase = uni.getStorageSync("idphoto")
			if (this.or_gender != '3' || this.TelModel != "" || this.imgBase != "" || this.Real_name == "已认证") {
				this.bgcolor = true
			}
			//所有的选项都为false 控制弹框隐藏
			if (this.userSexHide == false && this.TouXiangHide == false && this.idCardNum == false && this.isTel ==false) {
				this.TanKuangHide = false
				console.log("1111111");
			}
			uni.setStorageSync("isHide",this.TanKuangHide)
		},
		created() {
			this.order_list()
			//所有的选项都为false 控制弹框隐藏
			if (this.userSexHide == false && this.TouXiangHide == false && this.idCardNum == false && this.isTel ==
				false) {
				this.TanKuangHide = false
			}
			this.imgBase = uni.getStorageSync("idphoto")
			this.getuserIfor() //用户信息
			
		},
		destroyed() {
			this.TanKuangHide = true
		}
		
	}
</script>

<style scoped lang="less">
	.container {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.5);
		&>.tankaung {
			z-index: 999;
			width: 100vw;
			position: fixed;
			bottom: 0;
			// background: #F2F2F2;
			background-color: #F9F9F9;
			border-radius: 20rpx 20rpx 0 0 ;

			.title {
				width: 100vw;
				height: 108rpx;
				display: flex;
				align-items: center;
				// background-color: #FFFFFF;
				background: rgba(255, 255, 255, 0);

				image {
					width: 23rpx;
					height: 23rpx;
					margin: 0 251rpx 0 30rpx;
				}

				&>.text {
					height: 34rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #000000;
				}
			}

			.cont {
				width: 690rpx;
				margin: 20rpx auto 20rpx;
				background-color: #FFFFFF;
				padding-bottom: 78rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.TXtest {
					margin: 32rpx 0 24rpx 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.head-portrait {
					margin: auto;
					width: 200rpx;
					height: 200rpx;
					background-image: url(../../static/userifo-supplement/paishe2x.png);
					background-size: 80rpx 80rpx;
					background-position: 60rpx 60rpx;
					background-repeat: no-repeat;
					background-color: #F4F4F4;
					border-radius: 50%;
					overflow: hidden;

					&>image {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}

			&>.xingbie {
				width: 690rpx;
				margin: 20rpx auto 20rpx;
				background-color: #FFFFFF;
				padding-bottom: 78rpx;
				border-radius: 8rpx;

				&>.XBText {
					width: 128rpx;
					height: 86rpx;
					line-height: 86rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					margin-left: 18rpx;

				}

				&>.Gender {
					width: 680rpx;
					margin: auto;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.nan {
						// margin: 0 80rpx 0 155rpx;
					}

					.gender {
						display: inline-block;
						width: 304rpx;
						height: 80rpx;
						border-radius: 12rpx;
						background: #F2F2F2;

						.gender-ctn {
							margin: 20rpx 119rpx;

						}

						.image {
							vertical-align: middle;
							width: 32rpx;
							height: 32rpx;
							padding-left: 10rpx;
						}

						text {
							display: inline-block;
							width: 27rpx;
							height: 29rpx;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							// color: #000000;
						}
					}

					&>.nan-bg {
						color: #1CAAEA !important;
						background: rgba(28, 170, 234, 0.2);
						border: 2px solid #1CAAEA;
					}

					&>.nv-bg {
						background: rgba(249, 8, 101, 0.2);
						border: 2px solid #F90865;
						color: #F90865 !important;
					}

				}
			}

			&>.Real-name {
				width: 630rpx;
				padding: 0 30rpx;
				height: 88rpx;
				border-radius: 8rpx;
				margin: 0 auto 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				border-radius: 8rpx;

				.renzheng {
					.tex1-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
					}

					color: #ABABAB;

					image {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}

			}

			&>.TEL {
				width: 630rpx;
				height: 88rpx;
				margin: 0 auto 40rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					// width: 158rpx;
					// height: 31rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}

				input {
					width: 287rpx;
					height: 30rpx;
					font-size: 32rpx;
					font-weight: 500;
				}
			}

			.zlg-btn {
				margin: auto;
				width: 690rpx;
				height: 88rpx;

				border-radius: 12rpx;
				line-height: 88rpx;
				text-align: center;
				background: #ABABAB;
				color: #FFFFFF;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.zlg-btn-bg {
				background: #FCC928;
				color: #402110;
			}
		}
	}
</style>
